<template>
  <view class="point-detail-page">
    <uni-page-header title="青币明细" />
    <view class="main-container">
      <view class="total-info-wrap">
        <view class="points-wrap">
          <view class="coin-img">
            <u-image :src="coinIcon" width="28" height="28" />
          </view>
          <view class="title">我的青币</view>
          <view class="value">{{ userInfo.points }}</view>
          <view class="desc">可在青币商城中使用</view>
          <!-- <view class="overtime-tip">
            <view class="overtime-points">{{ expireCount }}青币</view>
            <text>即将到期</text>
          </view> -->
        </view>
      </view>

      <div class="tab-container">
        <view class="tab-header">
          <view
            v-for="(item, index) in tabs"
            :key="item"
            class="tab"
            :class="{'tab-active': curTab === index}"
            @click="onTabUpdate(index)"
          >
            {{ item }}
          </view>
        </view>

        <view class="list-wrap">
          <u-list height="100%" @scrolltolower="loadMore">
            <u-empty v-if="isEmpty" mode="list" icon-size="60" />
            <view v-else>
              <u-list-item v-for="(item, index) in listData" :key="index">
                <view class="item-card">
                  <view class="left">
                    <view class="type">{{ item.reason }}</view>
                    <view class="date">{{ item.createTime }}</view>
                  </view>
                  <view class="right">
                    <view class="points">
                      <u-image :src="coinIcon" width="28" height="28" />
                      <view class="value">{{ item.changeType === 1 ? `-${item.points}` : `+${item.points}` }}</view>
                    </view>
                    <!-- <view class="overtime-tip">{{ item.reason }}</view> -->
                  </view>
                </view>
              </u-list-item>
            </view>
          </u-list>
        </view>
      </div>
    </view>
  </view>
</template>

<script>
import {
  mapState
} from 'vuex'
import {
  wx_customer_points_list_hb
} from '../api/index.js'
import coinMiddleImg from '@/static/images/points/coin-middle.png'
export default {
  name: 'PointDetail',
  data() {
    return {
      pagination: {
        pageNum: 1,
        pageSize: 15,
        total: 0
      },
      coinIcon: coinMiddleImg,
      tabs: ['全部', '获取', '使用'],
      curTab: 0,
      listData: [],
      isEmpty: false
    }
  },
  computed: {
    ...mapState(['userInfo', 'expireCount'])
  },
  onLoad() {
    console.log('用户信息')
    console.log(this.userInfo)
    this.getListData()
  },
  methods: {
    onTabUpdate(index) {
      this.curTab = index
      this.listData = []
      this.pagination.page = 1
      this.getListData()
    },

    async getListData() {
      const {
        pageNum,
        pageSize
      } = this.pagination
      let params = {
        pageIndex: pageNum,
        pageSize
      }
      if (this.curTab !== 0) {
        Object.assign(params, {
          changeType: this.curTab === 1 ? 2 : 1
        })
      }
      uni.showLoading()
      try {
        const data = await wx_customer_points_list_hb(params)
        console.log('积分流水数据')
        console.log(data)
        uni.hideLoading()
        const {
          total,
          records
        } = data
        this.isEmpty = total === 0
        this.pagination.total = total
        this.listData = this.listData.concat(records)
      } catch (error) {
        uni.hideLoading()
      }
    },
    loadMore() {
      console.log('加载更多')
      const {
        total
      } = this.pagination
      if (this.listData.length === total && total !== 0) return
      this.pagination.pageNum++
      this.getListData()
    }
  }
}
</script>

<style lang="scss" scoped>
	.point-detail-page {
		height: 100vh;
		display: flex;
		flex-flow: column;
		overflow: hidden;

		.main-container {
			width: 95%;
			height: calc(100% - var(--status-bar-height) - 44px);
			margin: 20rpx auto;

			.total-info-wrap {
				position: relative;
				height: 200rpx;
				border-radius: 10rpx;
				padding: 0 20rpx;
				background-color: #FFF;
				@include flex-center;

				.points-wrap {
					position: relative;
					display: flex;
					flex-flow: column;
					align-items: center;

					.coin-img {
						position: absolute;
						left: -50rpx;
						top: 50%;
						transform: translateY(-50%);
					}

					.title {
						font-size: 28rpx;
						font-weight: bolder;
					}

					.value {
						font-size: 72rpx;
						font-weight: bolder;
					}

					.desc {
						font-size: 20rpx;
					}

					.overtime-tip {
						font-size: 20rpx;
						@include flex-column-center;
						position: absolute;
						top: 60%;
						right: -75%;
						transform: translateY(-60%);

						.overtime-points {
							color: #E02020;
						}
					}
				}

			}

			.tab-container {
				height: calc(100% - 200rpx - 40rpx);
				display: flex;
				flex-flow: column;
				gap: 20rpx;

				.tab-header {
					height: 60rpx;
					margin-top: 20rpx;
					@include flex-between;
					background: #FFF;
					box-shadow: 0 2rpx 6rpx 0 rgba(0, 0, 0, 0.05);
					border-radius: 30rpx;

					.tab {
						height: 100%;
						flex: 1;
						color: rgba(0, 0, 0, 0.5);
						font-size: 28rpx;
						@include flex-center;

						&-active {
							border-radius: 50rpx;
							color: #000;
							font-size: 32rpx;
							font-weight: bolder;
							background-color: $theme-color;
						}
					}
				}

				::v-deep.list-wrap {
					flex: 1;
					overflow: hidden;
					overflow-y: auto;
					padding-bottom: 20rpx;

					.item-card {
						padding: 20rpx 26rpx;
						margin-bottom: 20rpx;
						border-radius: 10rpx;
						background-color: #FFF;
						@include flex-between;

						.left {
							color: #000;

							.type {
								font-size: 28rpx;
							}

							.date {
								font-size: 24rpx;
								padding-top: 20rpx;
							}
						}

						.right {
							display: flex;
							align-items: flex-end;
							flex-flow: column;

							.points {
								flex: 1;
								@include flex-column-center;

								.value {
									font-size: 28rpx;
								}
							}

							.overtime-tip {
								color: #E02020;
								font-size: 25rpx;
								padding-top: 20rpx;
							}
						}
					}
				}
			}
		}
	}
</style>
